<template>
    <div>
        <top-bar></top-bar>
        <left-bar  :datas='data'></left-bar>
          <div class="system">
           <home-bar :currentPage='currentPage'></home-bar>
            <div class="system-main">
                 <div class="main-position">
                     首页  >   系统设置  >   我要推荐
                     <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                 </div>
                 <div class="main-height"></div>
                 <div class="main-mains">
                    <div class="main-top-nav">
                         <ul>
                             <router-link to="/system" @click.native="addPath('/system','系统设置')">
                                <li>商户资料</li>
                            </router-link>
                            <router-link to="/systemSafe" @click.native="addPath('/systemSafe','系统设置')">
                                <li>安全设置</li>
                            </router-link>
                            <router-link to="/systemStockAlert" @click.native="addPath('/systemStockAlert','系统设置')">
                                <li>库存预警设置</li>
                            </router-link>
                           <router-link  to="/recommend" @click.native="addPath('/recommend','系统设置')">
                                <li class="active">我要推荐</li> 
                            </router-link>
                            <router-link to="/recommends" @click.native="addPath('/recommends','系统设置')">
                                <li>推荐管理</li>
                            </router-link>
                            <router-link to="/about" @click.native="addPath('/about','系统设置')">
                                <li>关于我们</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="system-recommend">
                        <div class="system-recommend-top">
                            <div class="fl" @click='systemRecommends(1)'>面对面邀请</div>
                            <div class="fl"  @click='systemRecommends(2)'>二维码邀请</div>
                            <div class="fl" @click='systemRecommends(3)'>手机推荐</div>
                        </div> 
                        <div class="system-recommend-table">
                            <table>
                                <tr>
                                    <td>
                                        序号
                                    </td>
                                    <td>
                                        邀请方式
                                    </td>
                                    <td>
                                        客户名称
                                    </td>
                                    <td>
                                        注册日期
                                    </td>
                                    <td>
                                        状态
                                    </td>
                                </tr>
                                <tr v-for="(item,index) in tableData" :key="index" :class="{ active: index%2==1}">
                                    <th>{{item.num}}</th>
                                    <th>{{item.mode}}</th>
                                    <th>{{item.name}}</th>
                                    <th>{{item.date}}</th>
                                    <th :class="{actives:item.state=='待认证'}">{{item.state}}</th>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-menban" v-if='systemRecommend1 || systemRecommend2  || systemRecommend3'></div>
             <div class="system-messagebox1"  v-if='systemRecommend1'>
                <div class="system-messagebox1-top clear">
                    <span>手机号码推荐</span>
                    <i  @click='systemClick()'    class="el-icon-close system-icon  fr"></i>
                </div>
                <div class="system-messagebox1-con">
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >手机号码</div>
                        <div class="fl ">
                            <el-input
                                class="system-messagebox1-input1"
                                v-model="systemPhone"
                                clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="system-messagebox1-texts">错误提示！</div>
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >验证码</div>
                        <div class="fl ">
                            <el-input
                                class="system-messagebox1-input2"
                                v-model="systemCode"
                                clearable>
                            </el-input>
                        </div>
                        <div class="fl system-messagebox1-code">
                            获取验证码
                        </div>
                    </div>
                    <div class="system-messagebox1-texts">错误提示！</div>
                    <div class="system-messagebox1-textss">同一手机号码每天只能发送一次邀请，邀请24小时有效。</div>
                     <div class="clear">
                        <div class="fl system-messagebox1-t" ></div>
                        <div class="fl system-messagebox1-btn">
                            <div class="fl">提交</div>
                            <div class="fl" @click='systemClick(1)' >取消</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-messagebox1 system-recommend-messagebox" v-if="systemRecommend2">
                <div class="system-messagebox1-top clear">
                    <span>面对面邀请</span>
                    <i  @click='systemClick()'    class="el-icon-close system-icon  fr"></i>
                </div>
                <div class="system-messagebox1-con">
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >注册类型</div>
                        <div class="fl ">
                            <el-select v-model="value" placeholder="请选择类型" class="system-recommend-sel"  >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="system-messagebox1-texts">错误提示！</div>
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >手机号码</div>
                        <div class="fl ">
                            <el-input
                                placeholder="请输入手机号码" class="system-recommend-sel"
                                v-model="systemCode"
                                clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="system-messagebox1-texts">错误提示！</div>
                    <div class="clear">
                        <div class="fl system-messagebox1-t" >验证码</div>
                        <div class="fl system-messagebox1-code  system-messagebox1-codes">
                           {{systemCodes}}
                        </div>
                    </div>
                    <div class="system-messagebox1-textss system-recommend-textss">临时密码仅24小时有效，请提示对方尽快登录【某应用】修改密码。<br>
                    临时密码将自动发送对方手机。在更改密码前，将无法使用钱包功能</div>
                     <div class="clear">
                        <div class="fl system-messagebox1-t" ></div>
                        <div class="fl system-messagebox1-btn">
                            <div class="fl">提交</div>
                            <div class="fl" @click='systemClick(1)' >取消</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-messagebox1 system-recommend-messageboxs" v-show="systemRecommend3">
                <div class="system-messagebox1-top clear">
                    <span>二维码邀请</span>
                    <i  @click='systemClick()'    class="el-icon-close system-icon  fr"></i>
                </div>
                <div class="system-messagebox1-con">
                    <canvas id='qrcode' width="300px" height="400px" >

                    </canvas>
                    <div id='qrcodes' width="180px" height="180px" >

                    </div>
                    <div class="qrcode-btn" @click="download('png')">
                        下载二维码
                    </div>
                </div>
            </div>
          </div>
    </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import QRCode from "qrcodejs2";
import homeBar from "../public/homebar";
export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/system",
      currentPage:{path:"/recommend",name:"系统设置"},  //当前页面地址和一级目录名称
      systemRecommend1: false,
      systemRecommend2: false,
      systemRecommend3: false,
      systemPhone: "",
      systemCode: "",
      systemCodes: "823646", //面对面推荐用户的码
      value: "", //注册类型
      tableData: [
        {
          num: "01",
          mode: "面对面邀请",
          name: "新贵大药房",
          date: "2018-10-20",
          state: "待认证"
        },
        {
          num: "02",
          mode: "二维码推荐",
          name: "新贵大药房",
          date: "2018-10-20",
          state: "待认证"
        },
        {
          num: "03",
          mode: "手机号码推荐",
          name: "新贵大药房",
          date: "2018-10-20",
          state: "已认证"
        },
        {
          num: "04",
          mode: "面对面邀请",
          name: "新贵大药房",
          date: "2018-10-20",
          state: "待认证"
        }
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  mounted() {
    this.qrCode("小乔", "五星用户"); //传递用户信息
    this.qrCodes("www.baidu.com"); // 传递二维码信息
  },
  methods: {
    systemClick() {
      this.systemRecommend1 = false;
      this.systemRecommend2 = false;
      this.systemRecommend3 = false;
    },
    systemRecommends(e) {
      if (e == 1) {
        //面对面邀请
        this.systemRecommend2 = true;
      } else if (e == 2) {
        //二维码邀请
        this.systemRecommend3 = true;
      } else {
        //手机号邀请
        this.systemRecommend1 = true;
      }
    },
    qrCode(name, star) {
      //绘制二维码外框图片
      let ctx = document.getElementById("qrcode").getContext("2d");
      ctx.font = "16px 微软雅黑";
      ctx.fillStyle = "#202020 ";
      ctx.fillText(name, 135, 20, 200);

      ctx.font = "12px 微软雅黑";
      ctx.fillStyle = "#666";
      ctx.fillText(star, 126, 40, 200);

      let img = new Image();
      img.src = "static/images/qrcode1.png";
      img.onload = function() {
        ctx.drawImage(img, 20, 60, 260, 318);
      };
    },
    qrCodes(texts) {
      //绘制二维码
      let qrcode = new QRCode("qrcodes", {
        width: 180,
        height: 180, // 高度
        text: texts // 二维码内容
      });
      setTimeout(function() {
        let ctxs = document.getElementsByTagName("canvas")[0];
        let ctxss = document.getElementsByTagName("canvas")[1];
        ctxs.getContext("2d").drawImage(ctxss, 60, 158);
      }, 10);
    },
    download(type) {
      let ctxImg = document.getElementsByTagName("canvas")[0];
      let imgdata = ctxImg.toDataURL(type);
      let fixtype = function(type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, "jpeg");
        let r = type.match(/png|jpeg|bmp|gif/)[0];
        return "image/" + r;
      };
      imgdata = imgdata.replace(fixtype(type), "image/octet-stream");
      //将图片保存到本地
      let saveFile = function(data, filename) {
        var link = document.createElement("a");
        link.href = data;
        link.download = filename;
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false, 
          false,
          false,
          false,
          0,
          null
        );
        link.dispatchEvent(event);
      };
      let filename = new Date().toLocaleDateString() + "." + type;
      saveFile(imgdata, filename);
    },
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    }
  }
};
</script>

<style lang="less" scoped>
@import "system.less";
</style>

